<template>
  <div class="post">
    <div class="left">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item
          v-for="(value, index) in cities"
          :key="index"
          :title="value.type"
          :name="index"
        >
          <div v-for="(v, i) in value.children" :key="i" class="citydesc">
            <span style="color:#ffa500;margin-right: 10px;">{{ v.city }}</span
            ><span style="color:#999999">{{ v.desc }}</span>
          </div>
        </el-collapse-item>
      </el-collapse>
      <h4>推荐城市</h4>
      <img
        v-if="this.recommendList.length > 0"
        :src="this.recommendList[1].images[0]"
        alt=""
        class="imagess"
      />
    </div>
    <div class="right">
      <!-- 搜索框 -->
      <div class="search">
        <input
          v-model="searchCity"
          type="text"
          class="searchs"
          placeholder="请输入想去的地方,例如'广州'"
          @keyup.enter="queryAdminRole"
        />
        <i class="el-icon-search"></i>
      </div>
      <!-- <div
        class="title"
        v-for="value in posts"
        :key="value.id"
        @click="tiaozhuan(value.id)"
      >
        {{ value.title }}
      </div> -->
      <div class="tj">
        推荐：
        <span
          class="tj-content"
          v-for="(item, index) in ipCity"
          :key="index"
          @click="xuanzCity(item)"
          >{{ item }}</span
        >
      </div>
      <div class="recommend">
        <span class="recommendtitle">推荐攻略</span>
        <el-button type="primary" icon="el-icon-edit" class="seendBtn"
          >写游记</el-button
        >
      </div>
      <div class="postsbox">
        <div class="postsItem" v-for="value in postsList" :key="value.id">
          <span class="title"
            ><a :href="'/post/tourdetails?id=' + value.id">{{
              value.title
            }}</a></span
          >
          <div class="content">
            <a
              v-html="value.summary"
              :href="'/post/tourdetails?id=' + value.id"
            ></a>
          </div>
          <div
            class="postsimg"
            v-for="(v, i) in value.images.slice(0, 3)"
            :key="i"
          >
            <img :src="v" alt="" />
          </div>
          <div class="postsbottom">
            <span class="el-icon-location-outline">{{ value.cityName }} by</span
            ><span style="color:#ffa500"> {{ value.account.nickname }}</span>
            <span class="el-icon-view"> {{ value.watch }}</span>
          </div>
        </div>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 6, 9, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.posts.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [],
      activeName: "1",
      cities: [],
      searchCity: "",
      images: [],
      pageIndex: 1,
      pageSize: 3,
      postsList: [],
      recommendList: [],
      ipCity: ["广州", "上海", "北京"]
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getPageData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getPageData();
    },
    tiaozhuan(id) {
      console.log(id);
      this.$router.push({
        path: "/post/tourdetails",
        query: { id: id }
      });
      this.$store.commit("post/saveId", id);
    },
    // 回车搜索
    queryAdminRole() {
      if (this.searchCity) {
        this.$axios({
          url: "/posts",
          params: {
            city: this.searchCity
          }
        }).then(res => {
          console.log(res);
          this.posts = res.data.data;
          this.getPageData();
        });
      } else if (this.searchCity == "") {
        this.$axios({
          url: `/posts`
        }).then(res => {
          this.posts = res.data.data;
          console.log(this.posts);
          this.getPageData();
        });
      }
    },
    xuanzCity(item) {
      this.searchCity = item;
      this.$axios({
        url: "/posts",
        params: {
          city: item
        }
      }).then(res => {
        console.log(res);
        this.posts = res.data.data;
        this.getPageData();
      });
    },
    // 分页数据
    getPageData() {
      const start = (this.pageIndex - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.postsList = this.posts.slice(start, end);
      console.log(this.postsList);
    }
  },
  mounted() {
    this.$axios({
      url: `/posts`
    }).then(res => {
      this.posts = res.data.data;
      console.log(this.posts);
      this.recommendList = this.posts.slice(0, 3);
      this.getPageData();
    });

    this.$axios({
      url: `/posts/cities`
    }).then(res => {
      if (res.status == 200) {
        this.cities = res.data.data;
      }
    });
  }
};
</script>

<style lang="less" scoped>
.post {
  width: 1000px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  .left {
    width: 270px;
    height: 1000px;
    margin-right: 20px;
    /deep/ .el-collapse-item {
      border-left: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;
      padding: 0 10px;
    }
    .citydesc:hover span:hover {
      cursor: pointer;
      border-bottom: 1px solid #ddd;
    }
    h4 {
      font-weight: 400;
      margin-top: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid #ebeef5;
    }
    .imagess {
      max-width: 270px;
    }
  }
  .right {
    width: 700px;
    margin-left: 20px;
    .search {
      width: 670px;
      position: relative;
      .searchs {
        width: 652px;
        height: 40px;
        border: 3px #ffa500 solid;
        padding: 0 20px;
        font-size: 16px;
        outline: none;
      }
      .el-icon-search {
        position: absolute;
        right: 0;
        top: 10px;
        right: 10px;
        font-size: 26px;
        color: #ffa500;
      }
    }
    .recommend {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      align-items: center;
      .recommendtitle {
        color: #ffa500;
        font-size: 18px;
        border-bottom: 2px solid #ffa500;
        height: 30px;
        line-height: 30px;
        padding: 10px 5px;
      }
      .seendBtn {
        height: 40px;
      }
    }
    .postsbottom {
      font-size: 12px;
      color: #999999;
      border-bottom: 1px solid #eeeeee;
      padding-bottom: 20px;
    }
    .postsItem {
      margin-top: 20px;
      .title:hover a {
        color: #ffa500;
      }
      .content {
        font-size: 14px;
        color: #666666;
        margin-top: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; //需要控制的文本行数
        overflow: hidden;
      }
      .postsimg {
        margin: 10px 0;
        display: inline-block;
        margin-right: 10px;
        img {
          width: 220px;
          height: 150px;
          object-fit: cover;
        }
      }
    }
  }
  .tj {
    margin: 10px 0;
    font-size: 12px;
    color: #666;
    .tj-content {
      margin: 0 5px;
      cursor: pointer;
      &:hover {
        color: orange;
        text-decoration: underline;
        // text-decoration: overline;
      }
    }
  }
  .title {
    width: 100%;
  }
}
</style>
